<!DOCTYPE html>
<html>
<head lang="en">
    <meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <title>我的积分</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/bootstrap/css/bootstrap.min.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../css/tmpl.css">
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css" />
    <link rel="stylesheet" href="../css/message.css">
    <link rel="stylesheet" href="../css/shop/myintegral.css">
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css"/>
    <script>
        function paramsMatter(value,row,index) {
            var span=document.createElement('span');
            span.setAttribute('title',value);
            span.innerHTML = value;
            return span.outerHTML;
        }

        function formatTableUnit(value, row, index) {
            return {
                css: {
                    "white-space": 'nowrap',
                    "text-overflow": 'ellipsis',
                    "overflow": 'hidden'
                }
            }
        }
    </script>
</head>
<body>
<div class="search-head">
    <div class="row nav-search">
        <div class="col">
            <a href="javascript:history.go(-1);">
                <span><i class="fa fa-chevron-left" ></i></span>
            </a>
        </div>
        <div class="col">
            <span>我的积分</span>
        </div>
        <div class="col"></div>
    </div>
</div>
<hr/>
<div class="panel-bd">
    <div class="parameter-desc">
        <span id="myIntegral"></span>
        <hr>
        <table>
            <thead>
                <tr>
                    <th>时间</th>
                    <th>类型</th>
                    <th>积分</th>
                </tr>
            </thead>
            <tbody id="tbody">
                <tr>
                   <td></td>
                    <td></td>
                    <td></td>
                </tr>
            </tbody>
        </table>
        <div style="text-align: center">
            <span>
                <button type="button" class="btn btn-sm upBtn">上一页</button>
                <button type="button" class="btn btn-sm nextBtn">下一页</button>
                当前页<i class="i1"></i>/<i class="i2"></i>
            </span><br/>
        </div>
    </div>
</div>
<ul class="mainmenu">
    <li><a href="/mine/myorder.html"><b><i class="fa fa-star fa-2x"></i></b><span>我的订单</span></a></li>
    <li><a href="/mine/product.html"><b><i class="fa fa-commenting-o fa-2x"></i></b><span>前往积分商城</span></a></li>
    <li><a href="/mine/packsack.html"><b><i class="fa fa-book fa-2x"></i></b><span>我的物品</span></a></li>
</ul>
<hr>
    <script>
        $(function () {
            //获取当前用户
            var userStr = sessionStorage.getItem("user");
            var userId;
            if (userStr) {
                userId = JSON.parse(userStr).id;
                }
            //回显用户积分:
            $.get("/integral/"+userId,function (data) {
                if(data){
                    var integral="我的积分: "
                    myIntegral = data.count
                    $("#myIntegral").after(integral+myIntegral)
                }
            })
            //翻页需要的数据
            //当前页
            var currentPage = 1;
            //上一页
            var prePage = 1;
            //下一页
            var nextPage = 1;
            goPage();
            function goPage() {
                $.get("/integral",{userId:userId,currentPage:currentPage},function (data) {
                    if(data){
                        var html="";
                        $.each(data.list,function (index,ele) {
                            var symbol = "-";
                            if(ele.integral==0){
                                symbol = "+"
                            }
                            html+='  <tr>' +
                                '                   <td>'+ele.changeTime+'</td>' +
                                '                    <td>'+ele.integralDisplay+'</td>' +
                                '                    <td class="symbol">'+symbol+ele.changeNum+'</td>' +
                                '                </tr>'
                        })
                        $("#tbody").html(html)
                        $()
                        prePage = data.prePage;
                        nextPage =data.nextPage;
                        $(".i1").html(data.pageNum);
                        $(".i2").html(data.pages);
                    }
                })
            }
            $(".upBtn").click(function () {
                currentPage = prePage;
                goPage();
            })
            $(".nextBtn").click(function () {
                currentPage = nextPage;
                if(currentPage!=0){
                    goPage();
                }
            })
        })
    </script>
</body>
</html>